<template>
	<div id="timeBase">
		<el-collapse>
			<el-collapse-item v-model="activeNames" title="已完成节点" name="1">
				<el-timeline v-for="(item,index) in completed" :key="index">
					<el-timeline-item :timestamp="item.RDT" placement="top">
						<el-card>
							<el-row>
								<el-col :span="6">
									<img class="portrait" src="../../../public/img/portrait.jpeg" alt />
								</el-col>
								<el-col :span="18">
									<p>工作人员：{{item.EmpFromT}}</p>
									<p>{{item.NDFromT}}节点发送 -> 到达{{item.NDToT}}节点</p>
									<p>到达人员：{{item.EmpFromT}}</p>
								</el-col>
							</el-row>
						</el-card>
					</el-timeline-item>
				</el-timeline>
			</el-collapse-item>
			<el-collapse-item v-model="activeNames" title="等待审批" name="2">
				<el-timeline v-for="(item,index) in unfinished" :key="index">
					<el-timeline-item :timestamp="item.RDT" placement="top">
						<el-card>
							<el-row>
								<el-col :span="6">
									<img class="portrait" src="../../../public/img/portrait.jpeg" alt />
								</el-col>
								<el-col :span="18">
									<p>审批人：{{item.FK_Emp}}</p>
									<p>阅读状态：{{item.isread ? '已阅读' : '未阅读'}}</p>
									<p>工作到达日期：{{item.RDT}}</p>
									<p>应完成日期：{{item.SDTOfNode}}</p>
								</el-col>
							</el-row>
						</el-card>
					</el-timeline-item>
				</el-timeline>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
export default {
	name: "timeBase",

	data() {
		return {
			data:[],
			completed: [],
			unfinished: [],
			activeNames: ['1']
		};
	},

	beforeCreate() {},

	created() {},
	mounted() {
		this.$Bus.$on("track", () => {
			this.data = this.$store.getters.getTrack;
			console.log("进入时间轴",this.data);
			// this.completed = item.Track; //已完成
			// console.log("-----",item.Track.sort(this.compare()));
			this.completed = this.data.Track.sort((a,b)=>{ return a.NDFrom-b.NDFrom});//已完成
			console.log('===',this.completed);
			this.data.WF_GenerWorkerList.forEach(item=>{
				if(item.IsPass !=1){
					this.unfinished.push(item)
				}
			})  //未完成
			// this.drawing();
		});
	},

	methods: {
		drawing() {},
	},

	//监听
	computed: {},

	components: {},

	//监听后执行动作
	watch: {}
};
</script>

<style lang="less" scoped>
/deep/ .el-card__body {
	p {
		line-height: 1;
	}
}
.portrait {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
</style>